<template>
    <div>
        <el-button type="success" class="classAddBtn" icon="el-icon-circle-plus" @click="handleAdd">新增班级</el-button>
        <el-input class="filterName" v-model="name" placeholder="请输入内容"></el-input>
        <el-button type="primary" class="classAddBtn" icon="el-icon-zoom-in" @click="handleFilterName">查询</el-button>
        <el-button type="warning" class="classAddBtn" icon="el-icon-zoom-in" @click="handleAll">全部</el-button>

        <el-table :data="classList" border style="width: 50%">
            <el-table-column fixed prop="_id" label="ID" width="350">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="220">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDel(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="班级信息新增" :visible.sync="dialogFormVisibleAdd" width="25%">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="班级名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入班级名称"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitFormAdd('ruleForm')">确认</el-button>
                <el-button @click="resetFormAdd('ruleForm')">重置</el-button>
            </el-form>
        </el-dialog>
        <el-dialog title="班级信息修改" :visible.sync="dialogFormVisibleChange" width="25%">
            <el-form :model="form1" :rules="rules1" ref="ruleForm1">
                <el-form-item label="班级名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form1.name" autocomplete="off" placeholder="请输入班级名称"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitFormChange('ruleForm1')">确认</el-button>
                <el-button @click="resetFormChange('ruleForm1')">重置</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api'
export default {
    mounted() {
        this.getClassList();
    },
    data() {
        return {
            dialogFormVisibleAdd: false,
            dialogFormVisibleChange: false,
            formLabelWidth: '80px',
            pageIndex: 1,
            pageSize: 10,
            classList: [],
            form: {
                name: ""
            },
            form1: {
                name: "",
                id: ""
            },
            rules: {
                name: [
                    { required: true, message: '请输入班级名称', trigger: 'blur' },
                    { min: 2, max: 10, trigger: 'blur' }
                ],
            },
            rules1: {
                name: [
                    { required: true, message: '请输入班级名称', trigger: 'blur' },
                    { min: 2, max: 10, trigger: 'blur' }
                ],
            },
            name: ""
        }
    },
    methods: {
        async getClassList() {
            let res = await api.getClassList({ pageIndex: this.pageIndex, pageSize: this.pageSize })
            if (res?.code == 200) {
                this.classList = res.data;

            } else {
                this.classList = []
            }
        },
        async delClassById(id) {
            let res = await api.delClassById({ id });
            if (res?.code == 200) {
                this.$message({
                    type: "success",
                    message: res.message
                })
                this.getClassList();
            } else {
                this.$message.error(res.message);
            }
        },
        handleEdit(row) {
            this.dialogFormVisibleChange = true;
            this.form1.name = row.name;
            this.form1.id = row._id;
        },
        handleDel(id) {
            this.delClassById(id)
        },
        handleAdd() {
            this.dialogFormVisibleAdd = true
        },
        async handleOk() {
            let res = await api.addClass({ ...this.form });
            if (res?.code == 200) {
                this.$message({
                    type: "success",
                    message: res.message
                })
                this.dialogFormVisibleAdd = false;
                this.form.name = ""
                this.getClassList()
            } else {
                this.$message.error(res.message)
            }
        },
        async handleChange() {
            let res = await api.updateClass({ ...this.form1 });
            if (res?.code == 200) {
                this.$message({
                    type: "success",
                    message: res.message
                })
                this.dialogFormVisibleChange = false;
                this.getClassList()
            } else {
                this.$message.error(res.message)
            }
        },
        submitFormAdd(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleOk();
                } else {
                    return false;
                }
            });
        },
        resetFormAdd(formName) {
            this.$refs[formName].resetFields();
        },
        submitFormChange(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleChange();
                } else {
                    return false;
                }
            });
        },
        resetFormChange(formName) {
            this.$refs[formName].resetFields();
        },
        async handleFilterName() {
            console.log(1111);
            let res = await api.filterNameList({ name: this.name });
            if (res?.code == 200) {
                this.classList = res.data;

            } else {
                this.classList = []
            }
        },
        handleAll(){
            this.name = "";
            this.getClassList();
        }
    }
}
</script>

<style lang="scss" scoped>
.classAddBtn {
    margin: 0 0 20px 0;
}
.el-input.filterName{
    width: 15%;
    margin: 0 10px 0;
}
</style>